import QtQuick

Item {
    id: root
    property int stoneColor: 0          // 0 空  1 黑  2 白
    signal stoneClick()

    width: 30; height: 30  // 默认大小，应该与Board.qml中的cell大小一致
    visible: stoneColor != 0  // 只有非空位置才显示
    
    // 黑棋子
    Rectangle {
        id: blackStone
        anchors.fill: parent
        visible: stoneColor == 1
        color: "#000000"
        radius: width / 2
        
        // 传统木制风格的黑棋子
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#333333" }
            GradientStop { position: 0.5; color: "#000000" }
            GradientStop { position: 1.0; color: "#111111" }
        }
        
        // 添加光泽效果
        Canvas {
            anchors.fill: parent
            onPaint: {
                const ctx = getContext("2d");
                ctx.clearRect(0, 0, width, height);
                
                // 创建光泽效果
                const gradient = ctx.createRadialGradient(width*0.3, height*0.3, 1, width*0.3, height*0.3, width*0.5);
                gradient.addColorStop(0, "rgba(255, 255, 255, 0.4)");
                gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(width/2, height/2, width/2, 0, 2*Math.PI);
                ctx.fill();
            }
        }
    }
    
    // 白棋子
    Rectangle {
        id: whiteStone
        anchors.fill: parent
        visible: stoneColor == 2
        color: "#ffffff"
        radius: width / 2
        
        // 传统木制风格的白棋子
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#ffffff" }
            GradientStop { position: 0.5; color: "#f0f0f0" }
            GradientStop { position: 1.0; color: "#dddddd" }
        }
        
        // 添加光泽效果
        Canvas {
            anchors.fill: parent
            onPaint: {
                const ctx = getContext("2d");
                ctx.clearRect(0, 0, width, height);
                
                // 创建光泽效果
                const gradient = ctx.createRadialGradient(width*0.3, height*0.3, 1, width*0.3, height*0.3, width*0.5);
                gradient.addColorStop(0, "rgba(0, 0, 0, 0.2)");
                gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(width/2, height/2, width/2, 0, 2*Math.PI);
                ctx.fill();
            }
        }
    }

    // 落子动画
    Behavior on scale {
        NumberAnimation { duration: 150; easing.type: Easing.OutBack }
    }
    Component.onCompleted: scale = 0.3
    Timer { interval: 10; running: true; onTriggered: scale = 1.0 }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: stoneClick()
    }
}